<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <title>易景地图真实导航|室内三维地图引擎|ESmap</title>
  <meta name="keywords" content="易景地图真实导航,室内地图,三维地图引擎,三维地图制作,室内定位,易景地图,ESMap" />
  <meta name="description" content="易景地图第三人称导航,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。" />
  <link href="../lib/bootstrap.min.css" rel="stylesheet">
  <link href="css/common.css" rel="stylesheet">
  <link href="css/iconfont/iconfont.css" rel="stylesheet">
</head>
<style type="text/css">
  #pannel {
    position: absolute;
    left: 2%;
    bottom: 10%;
    z-index: 999;
  }

  #description {
    position: absolute;
    left: 50%;
    top: 86px;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 255);
    border-radius: 4px;
    margin-left: -140px;
    opacity: 0.7;
  }

  #tool-tip {
    position: absolute;
    color: #fff;
    font-size: 18px;
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    z-index: 2;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
  }

  .container-fluid h1 {
    text-align: center;
  }
</style>

<body ms-controller="ctrl" class="ms-controller">
  <div id="map-container"></div>
  <div class="loading">
    <div class="lodingImg"></div>
  </div>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <h1>易景室内三维地图引擎 (真实导航)</h1>
      
      <div class="tips-right">
          <span class="tip1"></span>
          <span class="tip2"></span>
      </div>
      <div class="tips-msg">
          <div class="msg msg1">
              <div class="erweima"></div>
              <p>手机扫一扫进入体验</p>
          </div>
          <div class="msg msg2">
              <h4>真实导航</h4>
                <p>1. 自动规划最短路径</p>
                <p>2. new esmap.ESNavigation({...}) 创建导航对象</p>

              <div style="display: none">易景地图第三人称导航,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。</div>
          </div>
      </div>
    </div>
  </nav>
  <div id="description">
    暂无导航提示信息
  </div>
  <div id="pannel">
    <input type="button" class="btn btn-default btnclass" onclick="reset()" value="重置" />
    <input type="button" class="btn btn-default btnclass" onclick="startNavi()" value="真实导航开始" />
    <input type="button" class="btn btn-default btnclass" data-toggle="button" onclick="toggle()" value="显示/隐藏真实定位路线" />
  </div>
  <div class="viewmode-floor btn-floor-vertical" data-toggle="buttons">
    <button id="btn2D" class="btn btn-default">2D</button>
    <button id="btn3D" class="btn btn-default">3D</button>
  </div>
  <script src="../lib/config.js"></script>
  <script src="../lib/esmap.min.js"></script>
  <script src="../lib/jquery-2.1.4.min.js"></script>
    <script src="../lib/jquery.qrcode.min.js"></script>
    <script src="../lib/tips_controls.js"></script>
  <script src="../lib/bootstrap.min.js"></script>

  <script type="text/javascript">
    //定义全局map变量
    var map;
    var esmapID = getQueryString('id') || defaultOpt.mapID;
    var styleid = getQueryString("styleid") || defaultOpt.themeID;
    // 导航对象
    var navi;
    var maxEndDistance = 0.01;
    var floorControl;
    var lm; //定位标注
    //坐标点下标
    var coordIndex = 0;
    var coordsData = null;
    var line = null;
    var lineVisible = true;
    var timer;
    var mapCoord = null;
    window.onload = function () {
      if (navi) {
        navi.stop();
        navi = null;
      }
      // 楼层控制控件配置参数
      var ctlOpt = new esmap.ESControlOptions({
        position: esmap.ESControlPositon.RIGHT_TOP,
        imgURL: 'image/wedgets/'
        // allLayer: true
        // size:"normal"
      })
      // 放大、缩小控件配置
      var ctlOpt1 = new esmap.ESControlOptions({
        position: esmap.ESControlPositon.LEFT_TOP, // 位置 左上角
        // 位置x,y的偏移量
        offset: {
          x: 20,
          y: 60
        },
        imgURL: 'image/wedgets/'
      })
      map = new esmap.ESMap({
        container: $('#map-container')[0], // 渲染dom
        mapDataSrc: "../data", //地图数据位置
        mapThemeSrc: "../data/theme", //主题数据位置
        focusAlphaMode: true, // 对不可见图层启用透明设置 默认为true
        focusAnimateMode: true, // 开启聚焦层切换的动画显示
        focusAlpha: 0.1, // 对不聚焦图层启用透明设置，当focusAlphaMode = true时有效
        focusFloor: 1
      });
      map.openMapById('example');
      map.showCompass = true; //显示指南针 
      //地图加载完成回调
      map.on('loadComplete', function () {
        floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
        var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
        createNavi();
        bingEvents();
        setStartEnd();
        createLocMarker();
        $.getJSON("data.json", function (data) {
          coordsData = data.points;
        })
      });
      map.on('mapClickNode',function(e){
        if(e.floor&&navi.isNaving){
          mapCoord = e.hitCoord
          mapCoord.fnum = e.floor
          console.log(mapCoord)
          navi.walkTo(mapCoord);
        }
      })
    };

    function createNavi() {
      if (map.naviData.length == 0) {
        console.warn("地图导航数据信息不存在！");
        return;
      }
      if (!navi) {
        //初始化导航对象
        navi = new esmap.ESNavigation({
          map: map, //必需
          //以下皆为可选-----------------
          // mode: 1,           //默认为1。  1:人行，2：车行
          audioPlay: true,  //默认为false  是否开启语音播报
          followAngle: true, //默认为false  是否开启视角角度跟随
          followPosition: true, //默认为true  是否开启视角位置跟随
          followGap: 0, //地图事件跟随间隔，设置为0则为实时跟随。默认为3，表示3秒
          lineStyle: { //自定义导航线的样式，如不指定则为默认样式
            color: '#58a2e4',
            //设置线为导航线样式
            lineType: esmap.ESLineType.ESARROW,
            // lineType: esmap.ESLineType.DASH,
            lineWidth: 6,
            offsetHeight: 0.5,
            smooth: false,
            noAnimate: true
            // 设置边线的颜色   
            // godEdgeColor: '#920000',
            // 设置箭头颜色
            // godArrowColor: "#ffffff"
          },
          scaleAnimate: true, //默认为true   是否开启/关闭 所有导航开始时的动画。
          // 以下属性只有当scaleAnimate属性为true时才生效。用来配置开始导航之后的过渡动画效果。
          scaleLevel: 1, //导航时缩放等级，默认1
          tiltAngle: 20 //倾斜角，默认80
        });
      }
      navi.on("walking", function (data) {
        showDis(data)
      //定位旋转
      lm.rotateTo(-data.angle);
      })
      navi.on("complete", function () {
        $('#description').html("到达终点")
        console.log("导航停止")
      })
    }

    function toggle() {
      lineVisible = !lineVisible;
      line.o3d_.visible = lineVisible;
    }

    function reset() {
      clearInterval(timer);
      lm && lm.moveTo({
        x: 12683434.546457876,
        y: 2557896.0062286886,
        time:0.2,
        fnum: 1
      })
      $("#description").html("暂无导航信息");
      navi.clearNaviLines();
      map.clearLineMarkById("routes")
      setStartEnd();
    }

    function startNavi() {
      esmap.ESMapUtil.playAudio("开始导航")
      coordIndex = 0;
      navi.start();
      navi.on("reRouting", function () {
        $('#description').text("路径偏移，重新规划路径")
      })
      updateCoord()  //直接开始导航。
    }
    //定位真实导航坐标
    function updateCoord() {
      var points = [];
      timer = setInterval(function () {
        if (coordIndex >= coordsData.length) {
          clearInterval(timer)
          return;
        }
        var coord = coordsData[coordIndex];
        navi.walkTo(coord);
        points.push(coord);
        drawLine(points);
        coordIndex++;
      }, 1000)
    }
    //绑定事件
    function bingEvents() {
      // 2维显示事件
      $('#btn2D').click(function () {
        map.viewMode = esmap.ESViewMode.MODE_2D; // 2维模式
      });

      // // 3维显示事件
      $('#btn3D').click(function () {
        map.viewMode = esmap.ESViewMode.MODE_3D;; // 3维模式
      });
    }

    function setStartEnd() {
      if (navi) {
        navi.setStartPoint({
          x: 12683425.395161062,
          y: 2557886.083905697,
          fnum: 1,
          height: 1,
          url: 'image/start.png',
          size: 64
        });
        navi.setEndPoint({
          x: 12683467.367029807,
          y: 2557862.8654304906,
          fnum: 1,
          height: 1,
          url: 'image/end.png',
          size: 64
        });
        // 画导航线
        navi.drawNaviLine();
      };
    }

    function drawLine(points) {
      if (points.length && points.length <= 1) return;
      map.clearLineMarkById("routes")
      //配置线标注样式
      var lineStyle = {
        lineWidth: 6,
        alpha: 0.8,
        offsetHeight: 0,
        smooth:false,
        lineType: esmap.ESLineType.FULL
      }

      //创建线标注对象
      line = new esmap.ESLineMarker("routes", points, lineStyle)
      //调用地图的画线方法
      map.drawLineMark(line);
      line.o3d_.visible = lineVisible;
    }

    function createLocMarker() {
      lm = new esmap.ESLocationMarker({
        url: 'image/pointer.png',
        size: 150,
        height: 30
      });
      map.addLocationMarker(lm);
      lm.setPosition({
        x: 12683434.546457876,
        y: 2557896.0062286886,
        floornum: 1,
        zOffset: 1 //离地面的偏移量
      })
      //为navi对象绑定定位标注
      navi.locationMarker = lm;
    }
    //显示路径数据
    function showDis(data) {
      //距终点的距离
      distance = data.remain;
      //路线提示信息
      var info = navi.naviDescriptions[data.index];
      var f = info[0] + parseInt(data.distanceToNext) + info[2];
      // //当距离小于距离终点的最大距离时结束导航
      // if (distance < maxEndDistance) {
      //   distance = 0;
      //   f = '到达终点';
      // }
      //普通人每分钟走80米。
      var time = distance / 80;
      var m = parseInt(time);
      var s = Math.floor((time % 1) * 60);
      $('#description').html('<p>距终点：' + distance.toFixed(1) + ' 米</p><p>大约需要：  ' + m + '  分钟   ' + s +
        '   秒</p><p>路线提示：' + f + ' </p>');
    };
  </script>
</body>

</html>